<template>
  <div class="app-container">
    <div class="filter-container" style=" display: flex;">
      <div style="width: 60%; padding-right: 1px;">
        <el-form ref="dataForm" :model="form" label-width="150px" :rules="rules" style="width:100%;margin-top:20px">
          <el-form-item label="类型：" prop="">
            <el-col :span="12">
              <el-select v-model="form.index_object">
                <el-option label="责任者" value="zrz" />
                <el-option label="主题词" value="ztc" />
                <el-option label="标题" value="tm" />
                <el-option label="时间" value="sj" />
                <el-option label="档号" value="dh" />
                <el-option label="密级" value="mj" />
                <el-option label="保管期限" value="bgqx" />
                <el-option label="全宗号" value="qzh" />
                <el-option label="案卷号" value="ajh" />
                <el-option label="件号" value="jh" />
                <el-option label="分类号" value="flh" />
                <el-option label="全文标识" value="qwbs" />
                <el-option label="类别号" value="lbh" />
                <el-option label="文种" value="wz" />
                <el-option label="题名" value="tm" />
                <el-option label="文件编号" value="wjbh" />
                <el-option label="载体类型" value="ztls" />
                <el-option label="载体数量" value="ztsl" />
                <el-option label="载体单位" value="ztdw" />
                <el-option label="载体规格" value="ztgg" />

                <el-option label="缩微号" value="swh" />
                <el-option label="档案馆号" value="dagdh" />
                <el-option label="数据类型" value="sjlx" />
                <el-option label="附注" value="fz" />
              </el-select>
            </el-col>
          </el-form-item>

          <el-form-item v-if="form.headRegOrDic !='4'" label="目标区域：" prop="">
            <el-col :span="24" style="display: flex;">
              <div>
                <el-radio v-model="form.targetAreaType" label="1">
                  全文
                </el-radio>
                <!-- <el-radio v-model="form.targetAreaType" label="2">
                  每自然段
                </el-radio> -->

                <el-radio v-model="form.targetAreaType" label="3">
                  表达式
                </el-radio>
              </div>
              <div v-if="form.targetAreaType=='3'" style="margin-left: 10px;">
                <el-input v-model="form.targetAreaTypeRegular" style="width: 300px;" placeholder="请输入内容" />
              </div>
              <div>
                <el-button style="margin-left: 10px;" @click="targetAreaPreview">
                  预览
                </el-button>
              </div>
            </el-col>
          </el-form-item>

          <el-form-item v-if="form.headRegOrDic =='4'" label="锚点配置：" prop="">
            <div style="margin-bottom: 5px;display: flex;">
              <label class="labal">
                锚点字符串：
              </label> <el-input v-model="form.mdzfc" style="width: 250px;">
                <el-button slot="append" @click="miaodianPreview">
                  查找锚点位置
                </el-button>
              </el-input>
            </div>

            <div style="display: flex; margin-bottom: 5px;">
              <label class="labal">
                目标区域X范围:
              </label> <el-input v-model="form.xStartName" style="width: 100px;" /> <el-input v-model="form.xStart"
                style="width: 120px; margin-left: 10px;" /> ~ <el-input v-model="form.xEndName" style="width: 100px;" />
              <el-input v-model="form.xEnd" style="width: 120px; margin-left: 10px;" />
            </div>
            <div style="display: flex;  margin-bottom: 5px;">
              <label class="labal">
                目标区域Y范围:
              </label> <el-input v-model="form.yStartName" style="width: 100px;" /> <el-input v-model="form.yStart"
                style="width: 120px; margin-left: 10px;" /> ~ <el-input v-model="form.yEndName" style="width: 100px;" />
              <el-input v-model="form.yEnd" style="width: 120px; margin-left: 10px;" />
            </div>
            <div style="display: flex;  margin-bottom: 5px;">
              <label class="labal">
                映射替换:
              </label> <el-input v-model="form.osName" style="width: 100px;" /> 为 <el-input v-model="form.newName"
                style="width: 100px;" />
            </div>
          </el-form-item>

          <el-form-item label="抽取内容：" prop="">
            <el-col :span="24" style="">
              <div style="display: flex;">
                <div>
                  <div style="display: flex;margin-bottom: 10px;">
                    <el-select v-model="form.headRegOrDic" style="width:150px;margin-left: 10px;"
                      @change="headRegOrDicChange">
                      <el-option label="正则" value="1" />
                      <el-option label="字典" value="2" />
                      <el-option label="正则加字典" value="3" />
                      <el-option label="定位" value="4" />
                    </el-select>

                    <div v-if="form.headRegOrDic=='1'" style="margin-left: 10px;">
                      <el-input v-model="form.headReg" style="width: 300px;" placeholder="请输入内容" />
                    </div>

                    <div v-if="form.headRegOrDic=='2'" style="margin-left: 10px;">
                      <el-select v-model="form.headDic" style="width:100px;margin-left: 10px;">
                        <el-option v-for="( itemDic ,indexDic ) in dictionaryType" :key="itemDic.key"
                          :label="itemDic.label" :value="itemDic.label" />
                      </el-select>
                    </div>

                    <div v-if="form.headRegOrDic=='3'" style="margin-left: 10px;">
                      <el-input v-model="form.headRegAndDic" style="width: 300px;" placeholder="请输入内容" />
                      <el-select v-model="form.headDic" style="width:100px;margin-left: 10px;">
                        <el-option v-for="( itemDic ,indexDic ) in dictionaryType" :key="itemDic.key"
                          :label="itemDic.label" :value="itemDic.label" />
                      </el-select>
                    </div>

                    <div>
                      <el-button style="margin-left: 10px;"
                        @click="headPreview(form.headRegOrDic, form.headReg,form.headRadio,form.headEntityTypeTxt,form.headDic,form.headRegAndDic ,1 )">
                        预览
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-form-item>

          <el-form-item label="如不满足此格式则抛弃:" prop="status">
            <el-col :span="15">
              <el-input v-model="form.noreg" style="width: 300px;" placeholder="请输入内容" />
            </el-col>
          </el-form-item>

          <el-form-item label="启用状态：" prop="status">
            <el-col :span="15">
              <el-switch v-model="form.status" />
            </el-col>
          </el-form-item>

          <el-form-item>
            <el-button type="info" @click="$router.push('/indexingSystem/page')">
              返回
            </el-button>
            <el-button :disabled="isDisabled" type="primary" @click="submit">
              保存
            </el-button>

            <!-- <el-button type="warning" @click="saveNew">
              保存并寻找新档案
            </el-button>

            <el-input v-model="form.skip_template_notes" placeholder="请输入备注内容"
              style="width: 150px; margin-left: 50px;" />
            <el-button :disabled="isDisabled" type="primary" @click="beizhu">
              跳过并备注
            </el-button> -->
          </el-form-item>
        </el-form>
      </div>

      <div style="padding-left: 2px; width: 40%;">
        <div style="display:flex;align-items: center;justify-content: center;flex-direction: column;">
          <div style="margin-top: 20px;  ">
            <span style="font-size: 12px;">文章案例ID</span> <el-input v-model="form.article_id"
              style="width: 150px; margin-left: 10px;" placeholder="" clearable />
            <el-button style="margin-left: 10px;" @click="fullTextPreview">
              全文预览
            </el-button>
            <el-button @click="pdfPreview">
              查看pdf
            </el-button>
          </div>

          <div style="margin-top: 20px;">
            <span>{{ title }}</span>
          </div>

          <el-divider />
          <div style="width: 100%;">
            <div v-if="statusText==1" style="font-size: 12px;white-space:pre-wrap" v-html="htmlContent" />
            <embed v-if="statusText==2" :src="fileUrl" type="application/pdf" width="100%" height="800px">
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="预览" :visible.sync="dialogVisible" width="60%">
      <div style="font-size: 12px;white-space:pre-wrap" v-html="retrunContent" />
      <span slot="footer" class="dialog-footer">

        <embed v-if="statusText==2" :src="fileUrl" type="application/pdf" width="100%" height="800px">
      </span>
    </el-dialog>

    <el-dialog title="查看pdf" :visible.sync="dialogVisiblepdf" width="100%" :fullscreen="true">
      <div>
        <embed :src="fileUrl" type="application/pdf" width="100%" height="800px">
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisiblepdf = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { artApi } from '@/api/art'
import { dictionaryApi } from '@/api/dictionary'
import { indexSysApi } from '@/api/indexSys'


export default {
  components: {},
  data() {
    return {
      cp: null,
      statusText: "1",
      dialogVisiblepdf: false,
      fileUrl: "",
      retrunContent: "",
      dialogVisible: false,
      dictionaryType: [],
      batch_code: "",
      htmlContent: "",
      title: "",
      content: '',

      isDisabled: false,
      list: [
        {
          key: Date.now(),
          value: [
            { titleOrContent: "", value: "", key: Date.now(), },
          ]
        }
      ],
      form: {
        headRegAndDic: "",
        targetAreaTypeRegular: "",
        targetAreaType: "1",
        headRegOrDic: "1",
        id: "",
        template_name: '',
        priority: '',
        status: true,
        mode: "1",
        identifying_features: [],
        article_id: "",
        headDic: "",
        headReg: "",
        mdzfc: "",
        xStartName: "",
        xEndName: "",
        xStart: "",
        xEnd: "",

        yStartName: "",
        yEndName: "",
        yStart: "",
        yEnd: "",
        osName: "",
        newName: "",
        index_object: "",
        noreg: ""
      },
      rules: {
        template_name: [
          { required: true, message: '请输入模板名字', trigger: 'blur' }
        ],
        priority: [
          { required: true, message: '请输入优先级', trigger: 'blur' }
        ],


      }

    }
  },
  async mounted() {

    this.form.id = this.$route.query.id

    this.cp = this.$route.query.cp


    let index_object = this.$route.query.key

    if (index_object != null) {
      this.form.index_object = index_object
    }

    let article_id = this.$route.query.article_id

    if (article_id != null) {
      this.form.article_id = article_id
      await this.fullTextPreview()

    }


    await this.getAllDictionaryType()

    if (this.form.id != null) {
      await this.getDetail()
      await this.fullTextPreview()
    }



  },
  methods: {

    async headRegOrDicChange(value) {


      // await this.getDetail()

      this.form.headRegOrDic = value + '';

      // this.form.headRegOrDic = ""
      this.form.targetAreaType = ""
      this.form.targetAreaTypeRegular = ""
      this.form.mdzfc = ""
      this.form.xStartName = ""
      this.form.xStart = ""
      this.form.xEndName = ""
      this.form.xEnd = ""
      this.form.yStartName = ""
      this.form.yStart = ""
      this.form.yEndName = ""
      this.form.yEnd = ""
      this.form.osName = ""
      this.form.newName = ""
      this.form.headReg = ""
      this.form.headDic = ""
      this.form.headRegAndDic = ""
      this.form.headDic = ""
      this.form.noreg = ""
      // this.form.article_id = ""
      // this.form.targetAreaType = '1'

    },

    async getDetail() {

      const url = 'getIndexSysById'
      var res = await indexSysApi(url, { id: this.form.id })
      if (res.code == 200) {

        this.form.index_object = res.data.index_object
        this.form.headRegOrDic = res.data.extract_content.headRegOrDic
        this.form.targetAreaType = res.data.extract_content.targetAreaType
        this.form.targetAreaTypeRegular = res.data.extract_content.targetAreaTypeRegular
        this.form.mdzfc = res.data.extract_content.mdzfc
        this.form.xStartName = res.data.extract_content.xStartName
        this.form.xStart = res.data.extract_content.xStart
        this.form.xEndName = res.data.extract_content.xEndName
        this.form.xEnd = res.data.extract_content.xEnd
        this.form.yStartName = res.data.extract_content.yStartName
        this.form.yStart = res.data.extract_content.yStart
        this.form.yEndName = res.data.extract_content.yEndName
        this.form.yEnd = res.data.extract_content.yEnd
        this.form.osName = res.data.extract_content.osName
        this.form.newName = res.data.extract_content.newName
        this.form.headReg = res.data.extract_content.headReg
        this.form.headDic = res.data.extract_content.headDic
        this.form.headRegAndDic = res.data.extract_content.headRegAndDic
        this.form.headDic = res.data.extract_content.headDic
        this.form.article_id = res.data.article_id
        this.form.noreg = res.data.extract_content.noreg


        if (res.data.status == 1) {
          this.form.status = true;
        } else {
          this.form.status = false;
        }




      }

    },

    async miaodianPreview() {

      let params = {
        id: this.form.article_id,
        "mdzfc": this.form.mdzfc,
      }

      let url = "getAimingPoint"
      var res = await indexSysApi(url, params)
      if (res.code == 200) {
        this.retrunContent = res.data
        this.dialogVisible = true;

      }


    },

    async headPreview(headRegOrDic, headReg, headRadio, headEntityTypeTxt, headDic, headRegAndDic = "", type, guding = "") {
      if (this.htmlContent == "") {
        this.$message.error('请先预览全文');
        return;
      }

      const url = 'getHeadPreview';


      let params = {
        "id": this.form.id,
        "article_id": this.form.article_id,
        "targetAreaType": this.form.targetAreaType,
        "targetAreaTypeRegular": this.form.targetAreaTypeRegular,
        "regionalMultipleType": this.form.regionalMultipleType,
        "regionalMultipleTypeRegular": this.form.regionalMultipleTypeRegular,
        "headRegOrDic": headRegOrDic,
        "headReg": this.form.headReg,
        "headRadio": headRadio,
        "headEntityTypeTxt": headEntityTypeTxt,
        "headDic": this.form.headDic,
        "headRegAndDic": headRegAndDic,
        "guding": guding,
        "mdzfc": this.form.mdzfc,
        "xName": this.form.xName,
        "xStart": this.form.xStart,
        "xEnd": this.form.xEnd,
        "yName": this.form.yName,
        "yStart": this.form.yStart,
        "yEnd": this.form.yEnd,
        "yEndName": this.form.yEndName,
        "yStartName": this.form.yStartName,
        "xStartName": this.form.xStartName,
        "xEndName": this.form.xEndName,
        "osName": this.form.osName,
        "newName": this.form.newName,
        "status": this.form.status,
        "index_type": this.form.index_type,
        "index_object": this.form.index_object,
        "noreg": this.form.noreg
      }



      var res = await indexSysApi(url, params)
      if (res.code == 200) {
        this.retrunContent = res.data
        this.dialogVisible = true;

      } else {
        this.$message.error(res.message)
      }



    },

    async pdfPreview() {

      this.statusText = 2

    },

    async targetAreaPreview() {
      if (this.htmlContent == "") {
        this.$message.error('请先预览全文');
        return;
      }


      const url = 'getTargetAreaPreview';

      var res = await indexSysApi(url, { id: this.form.article_id, "targetAreaType": this.form.targetAreaType, "targetAreaTypeRegular": this.form.targetAreaTypeRegular })
      if (res.code == 200) {
        this.retrunContent = res.data
        this.dialogVisible = true;

      }


    },

    async getAllDictionaryType() {
      const url = 'getAllDictionaryType'
      var res = await dictionaryApi(url, {})
      if (res.code == 200) {
        this.dictionaryType = res.data;
      }

    },

    async validate() {


      const url = 'validateTemplate'
      var res = await artApi(url, this.form)
      if (res.code == 200) {
        this.$message.success(res.message)
      }


    },






    async fullTextPreview() {
      const url = 'getArticleByidabutBiaoyin'
      var res = await artApi(url, { id: this.form.article_id })
      if (res.code == 200) {
        // this.htmlContent = res.data.content.replace(/\n\n/g, '</p><p>').replace(/\n/g, '<br>');
        this.htmlContent = res.data.content;
        this.title = res.data.title;
        this.fileUrl = res.data.pdf_url;
        this.statusText = 1
      }

    },

    saveNew() {

      this.$refs.dataForm.validate(async valid => {
        if (valid) {
          // this.isDisabled = true


          var params = {
            "index_sys_id": this.form.id,
            id: this.form.article_id,
            "index_object": this.form.index_object,
            "targetAreaType": this.form.targetAreaType,
            "targetAreaTypeRegular": this.form.targetAreaTypeRegular,
            "regionalMultipleType": this.form.regionalMultipleType,
            "regionalMultipleTypeRegular": this.form.regionalMultipleTypeRegular,
            "headReg": this.form.headReg,
            "headDic": this.form.headDic,
            "mdzfc": this.form.mdzfc,
            "xName": this.form.xName,
            "xStart": this.form.xStart,
            "xEnd": this.form.xEnd,
            "yName": this.form.yName,
            "yStart": this.form.yStart,
            "yEnd": this.form.yEnd,
            "yEndName": this.form.yEndName,
            "yStartName": this.form.yStartName,
            "xStartName": this.form.xStartName,
            "xEndName": this.form.xEndName,
            "osName": this.form.osName,
            "newName": this.form.newName,
            "status": this.form.status,
            "type": this.form.index_type,
            "headRegOrDic": this.form.headRegOrDic,
            "headRegAndDic": this.form.headRegAndDic,
            "noreg": this.form.noreg,


          }
          console.log(params)

          if (this.form.status) {
            params.status = 1;
          } else {
            params.status = 0;
          }

          console.log(params)

          const url = 'saveOrUpIndexsysFind'
          var res = await indexSysApi(url, params)
          if (res.code == 200) {
            this.$message.success('操作成功！')
            // this.$router.push('/indexingSystem/page')
          }
          this.isDisabled = false
        }
      })


    },



    submit() {
      this.$refs.dataForm.validate(async valid => {
        if (valid) {
          // this.isDisabled = true


          var params = {

            id: this.form.article_id,
            "index_object": this.form.index_object,
            "targetAreaType": this.form.targetAreaType,
            "targetAreaTypeRegular": this.form.targetAreaTypeRegular,
            "regionalMultipleType": this.form.regionalMultipleType,
            "regionalMultipleTypeRegular": this.form.regionalMultipleTypeRegular,
            "headReg": this.form.headReg,
            "headDic": this.form.headDic,
            "mdzfc": this.form.mdzfc,
            "xName": this.form.xName,
            "xStart": this.form.xStart,
            "xEnd": this.form.xEnd,
            "yName": this.form.yName,
            "yStart": this.form.yStart,
            "yEnd": this.form.yEnd,
            "yEndName": this.form.yEndName,
            "yStartName": this.form.yStartName,
            "xStartName": this.form.xStartName,
            "xEndName": this.form.xEndName,
            "osName": this.form.osName,
            "newName": this.form.newName,
            "status": this.form.status,
            "type": this.form.index_type,
            "headRegOrDic": this.form.headRegOrDic,
            "headRegAndDic": this.form.headRegAndDic,
            "noreg": this.form.noreg,


          }

          if (this.cp == 1) {
            params.index_sys_id = null;
          } else {
            params.index_sys_id = this.form.id;
          }


          console.log(params)

          if (this.form.status) {
            params.status = 1;
          } else {
            params.status = 0;
          }

          console.log(params)

          const url = 'saveOrUpIndexsys'
          var res = await indexSysApi(url, params)
          if (res.code == 200) {
            this.$message.success('操作成功！')
            this.$router.push('/indexingSystem/page')
          }
          this.isDisabled = false
        }
      })

    }



  }
}
</script>

<style scoped>
.huo {
  clear: both;
  margin-top: 15px;
  margin-bottom: 10px;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.row {
  display: flex;
  flex-direction: column;
}

.el-divider--horizontal {
  width: 80%;
}

.filter-container {
  position: relative;
  align-items: baseline;
}

.filter-container::after {
  content: "";
  position: absolute;
  top: 10%; /* 上边距，可以根据需要调整 */
  bottom: 10%; /* 下边距，可以根据需要调整 */
  left: 58%; /* 调整为左边div的宽度百分比加上它的padding */
  width: 2px; /* 分隔线宽度 */
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 49%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  background-size: 2px 4px; /* 控制虚线的宽度和间隔 */
}

.labal {
  font-size: 12px;
  color: #333;
  font-weight: normal;
  min-width: 80px;
}
</style>
